<template>
    <div class="page statistics show-tabbar">
        <div>
            <div class="mod-user com-border-bottom ml">
                <a href="javascript:;" @click="goToMemberDetail(userInfoData.group_id)">
                    <div class="avatar-box">
                        <img v-if="userInfoData.logo.thumb_url" class="avatar" :src="userInfoData.logo.thumb_url" alt="">
                        <img v-else class="avatar" src="../../static/imgs/avatar.png" alt="">
                        <span class="cover" v-if="userInfoData.member_status == -1">已离职</span>
                    </div>
                    <div class="info"> 
                        <p class="name">{{userInfoData.name}}</p>
                        <p class="team">{{userInfoData.group_name}}</p>
                    </div>
                    <span class="phone" @click="callPhone(userInfoData.mobile)"></span>
                </a>
            </div>  
            <inline-calendar 
                :weeks-list="weeksData"
                :custom-slot-fn="customFn"
                :start-date="calendarStartDate"
                :end-date="calendarEndDate"
                :value.sync="curDateValue"
                :toggle-year="toggleYear"
                :toggle-day="toggleDay"
                :set-month="setMonth"
                :set-year="setYear"
                :month.sync="ourMonth"
                :year.sync="ourYear"
                >
            </inline-calendar>
            <div class="weui-cells__title">
                <span v-if="perData.extra_info && perData.extra_info.task_name">考勤任务：{{perData.extra_info.task_name}}</span>
                <template v-if="perData.extra_info">
                    <span v-for="t in perData.extra_info.work_time_range">上班时间：{{t.start_time}}-{{t.end_time}}</span>
                </template>
                <span v-if="perData.extra_info && perData.extra_info.work_type == 1">考勤规则：弹性工作制，工时满{{perData.extra_info.work_time_length}}个小时即为正常</span>
                <span v-if="isThisDayNoKq">当日无考勤</span>
            </div>
                <div class="weui-cells">
                    <a class="weui-cell weui-cell_access" 
                        href="dmsaas://KaoqinPersonalDetail?urdData={{detailUrdData}}"
                        v-for="item in perData.attendance_list"
                        >
                        <div class="weui-cell__bd">
                            <p v-if="item.type == 1"><span class="title">上班时间</span>
                                {{item.attend_time}}
                                <span class="tag" 
                                    :class="[obj.value == 1 ? 'tag_2' : 'tag_3']" 
                                    v-for="obj in item.status">{{obj.name}}
                                </span>
                            </p>
                            <p v-if="item.type == 2"><span class="title">下班时间</span>
                                {{item.attend_time}}
                                <span class="tag" 
                                    :class="[obj.value == 1 ? 'tag_2' : 'tag_3']" 
                                    v-for="obj in item.status">{{obj.name}}
                                </span>
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    let yearData = {
        data1: [],
    }
    let y = 2000
    while(y < 2100){
        yearData.data1.push(y + '')
        y++
    }
    /**
     *  引入工具类库 或 Native API
     *  example : 
     */
    import widget from 'gapi/widget'
    import commonPage from 'clientApi/commonPage.js'
    import clientUi from 'gapi/clientUi.js'
    import KCApiApp from 'clientApi/KCApiApp.js'
    import cache from 'gapi/cache.js'
    import * as util from 'js/util.js'
    
    // commonPage.canPullWebView(true)
    // window.loadData = () => {
    //     location.reload()
    //     commonPage.dataDownloadFinished()
    // }
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import InlineCalendar from 'vux/dist/components/inline-calendar'
    /**
     *  组件实例对象
     */
    export default {
        components: {
            InlineCalendar
        },
        data: function(){
            return{
                status_id:'',
                taskID:'',
                userInfoData:{},
                isThisDayNoKq: false, 
                calendarEndDate: util.getLocalTime(new Date().getTime(), 'yyyy-MM-dd'),
                curDateValue: '',
                yearAndMonth: '',
                weeksData: ['日', '一', '二', '三', '四', '五', '六'],
                userId: 0,
                teamId: 0,
                projectId: 0,
                month: 0,
                year: 0,
                ourMonth: 0,
                ourYear: 0,
                // 个人考勤的日历数据
                perMonthStatus: {},
                // 个人考勤日历下方的数据
                perData: {
                    extra_info:{
                        user_name: "",
                        user_avatar: "",
                        user_phone: 0,
                        group_name: "",
                        date: 0,
                        work_hours: "",
                        task_id:0,
                        task_name: "",
                        work_type:0,
                        work_time_length:0,
                        work_time_range:[],
                        require_field: {}
                    },
                    attendance_list: []
                }
            }
        },
        computed: {
            detailUrdData: function(){
                // let str = `date=${this.perData.extra_info.date}&user_id=${this.userId}`
                let str = `date=${this.curDateValue}&user_id=${this.userId}&task_id=${this.taskID}&project_id=${this.projectId}&team_id=${this.teamId}`
                return encodeURIComponent(str)
            },
            calendarStartDate: function(){
                return this.calendarEndDate.replace(/^\d{4}/, (matchStr) => {
                    return matchStr - 1
                })
            },
            calendarEnbelDay: function(){
                return this.calendarEndDate.substr(8)
            },
            limitStart: function(){
                return util.getStampFromDate(this.calendarEndDate)
            },
            limitEnd: function(){
                return util.getStampFromDate(this.calendarEndDate.replace(/^\d{4}/, (matchStr) => {
                    return matchStr - 1
                }))
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){

                this.userId = util.getUrddataString('user_id') ? util.getUrddataString('user_id') : ''
                // this.curDateValue = util.getUrddataString('date') ? util.getUrddataString('date') : ''

                // 监听个人考勤的日期变化
                this.$watch('curDateValue', (newVal, oldVal) => {
                    // 这里发送网络请求
                    // commonPage.loadPageStatus('loading')
                    setTimeout(() => {
                        this.addMark()
                    }, 0)
                    if(this.teamId){
                        let taskId = this.perMonthStatus.data.status.filter((o, i, a) => {
                            console.log()
                            return o.date == newVal
                        })[0].task_id
                        this.taskID = taskId
                        this.getPerKqData(newVal, taskId)  

                    }
                }, {
                    immediate: true
                })

                cache.getCache('KqCacheMessge', (data) => {
                    
                    this.teamId = data ? data.team_id : 94
                    this.projectId = data ? data.project_id : 115
                    this.getUserInfo()
                    // this.getPerKqData()
                    this.getRiliData() 

                    
                })

                // 监听每月考勤状态
                this.$watch('perMonthStatus', (newVal, oldVal) => {
                    // alert(JSON.stringify(newVal))
                    // data-date="2016-11-04"
                    this.addMark()
                }, {
                    immediate: true
                })
            },
            getUserInfo (){
                let data = {
                    team_id: this.teamId,
                    project_id: this.projectId,
                    user_id: this.userId,
                    filter:''
                }
                util.ajax({
                    url: '/group/member_info',
                    data: data,
                    success: (res) => {
                        console.log(JSON.stringify(res))
                        if(res.errno == 0){
                            this.userInfoData = res.data
                            this.status_id = res.data.member_status
                            // cache.setMemoryCache('userInfoDatas', res.data)
                        }else{
                            // 服务器异常
                            widget.toast(res.errmsg)
                        }
                        
                    },
                    error: (xhr, error) => {
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            // 点击拨打电话
            callPhone (){
                
                clientUi.showPhoneDialog(this.perData.extra_info.user_phone, this.perData.extra_info.user_phone, '呼叫', '取消', 'Phone', () => {

                })
                // let data = {
                //     time: '8:20', 
                //     date: '2016-8-9',
                //     name: '霍春阳',
                //     pos: '八维学校',
                //     logo: '灵云'
                // }
                // KCApiApp.takePicture(data, (data) => {
                //     alert(JSON.stringify(data))
                //     this.imgArray.push(imgDomain + data.imageURL)
                // })
            },
            submit (){

            },
            toggleYear (){
                this.getRiliDataWrap()
            },
            toggleDay (){
                this.getRiliDataWrap()
            },
            goToMemberDetail (group_id){
                // 暂时没有gid
                let url = `uid=${this.userId}&gid=${group_id}&tid=${this.teamId}&pid=${this.projectId}`
                location.href = "dmsaas://ProjectMemberDetail?urdData=" + encodeURIComponent(url)
            },
            // 给日历中的日期打上红绿点
            addMark (){
                this.$nextTick(() => {
                    try{
                        this.perMonthStatus.data.status.forEach((o, i, a) => {
                            if(o.status == 1){
                                // 正常
                                $(`td[data-date="${o.date}"]:not(.is-disabled)`).addClass('green')
                            }else if(o.status == 2){
                                $(`td[data-date="${o.date}"]:not(.is-disabled)`).addClass('red')
                            }
                        })
                    }catch(e){

                    }
                    
                })
            },
            setMonth() {
                let data = {
                    data1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                }
                let i = data.data1.indexOf($('.calendar-month-txt.calendar-title').html())
                let select = [i + '']
                clientUi.showPicker(data, select, '选择月份', (res) => {
                    this.ourMonth = parseInt(res.data1)
                    this.getRiliDataWrap()
                })
            },
            setYear() {
                let i = yearData.data1.indexOf($('.calendar-year-txt.calendar-title').html())
                let select = [i + '']
                clientUi.showPicker(yearData, select, '选择年份', (res) => {
                    this.ourYear = parseInt(yearData.data1[res.data1])
                    this.getRiliDataWrap()
                })
            },
            getRiliDataWrap (){
                this.$nextTick(() => {
                    let y = $('.calendar-year-txt.calendar-title').html()
                    let m = $('.calendar-month-txt.calendar-title').html()
                    this.yearAndMonth = `${y}-${m}`
                    let curLimit = util.getStampFromDate(`${this.yearAndMonth}-${this.calendarEnbelDay}`)
                    if(curLimit > this.limitStart || curLimit < this.limitEnd){
                        widget.toast('只能获取1年内的考勤信息')
                    }
                    this.getRiliData()
                })
            },
            // 获取个人考勤日历数据 perMonthStatus
            getRiliData (){ 
                let data = {
                    team_id: this.teamId,
                    project_id: this.projectId,
                    // task_id: this.perData.extra_info.task_id,
                    user_id: this.userId,
                    month: this.yearAndMonth
                }
                console.log(data)
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/attendance/user_attendance_status_month',
                    data: data,
                    success: (res) => {
                        // alert('日历数据')
                        console.log(JSON.stringify(res))
                        commonPage.loadPageStatus('loadSuccess')
                        if(res.errno == 0){
                            this.perMonthStatus = res
                            let origin = util.getUrddataString('origin')
                            if(origin == 'listbystatus'){
                                this.curDateValue = util.getUrddataString('date') ? util.getUrddataString('date') : ''
                            }else{
                                this.curDateValue = res.data.date
                            }
                            
                        }
                    },
                    error: (xhr, error) => {
                        widget.toast('服务器异常')
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                        commonPage.loadPageStatus('loadSuccess')
                    }
                })
            },
            getPerKqData (paramDate, paramTaskId, isHideLoading){

                let data = {
                    team_id: this.teamId,
                    project_id: this.projectId,
                    user_id: this.userId,
                    date: paramDate,
                    task_id: paramTaskId
                }
                if(paramTaskId == 0){
                    this.isThisDayNoKq = true
                    this.perData = ['']
                    return
                }else{
                   // console.log(data)
                    if(!isHideLoading){
                        commonPage.loadPageStatus('loading')
                    }
                    util.ajax({
                        url: '/attendance/user_attendance_stats',
                        data: data,
                        success: (res) => {
                            // console.log(JSON.stringify(res))
                            commonPage.loadPageStatus('loadSuccess')
                            if(res.errno == 0){
                                this.isThisDayNoKq = false
                                this.perData = res.data
                                
                            }else if(res.errno == 21015){
                                // 用户没有考勤任务
                                this.perData = res.data
                                this.isThisDayNoKq = true
                            }else{
                                // 服务器异常
                                widget.toast('服务器异常')
                            }
                        },
                        error: (xhr, error) => {
                            widget.toast('服务器异常')
                            commonPage.loadPageStatus('loadSuccess')
                        },
                        noNetwork: () => {
                            // 无网络的回调
                            widget.toast('网络连接失败，请检查网络')
                            commonPage.loadPageStatus('loadSuccess')
                        }
                    }) 
                }
                
            }
        },
        created(){

            this.init();

        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<!-- <style src="../../static/css/common.css"></style> -->
<!-- <style src="../../static/css/calendar.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/attendance.css"></style> -->
<style>
/*!
 * Vux v0.1.3 (https://vux.li)
 * Licensed under the MIT license
 */
.vux-next-icon,.vux-prev-icon{position:absolute;left:0;top:15px;display:inline-block;width:12px;height:12px;border:1px solid #04be02;border-radius:0;border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-left:15px;line-height:40px}.vux-next-icon{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);left:auto;top:14px;right:15px}.vux-prev-icon:before{display:block;width:12px;height:12px;border:1px solid #04be02;border-width:1px 0 0 1px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.is-weekend-highlight td.is-week-0,.is-weekend-highlight td.is-week-6,.is-weekend-highlight td.is-week-list-0,.is-weekend-highlight td.is-week-list-6{color:#e59313}.inline-calendar a{text-decoration:none;tap-highlight-color:transparent}.calendar-month,.calendar-year{position:relative}.calendar-header{line-height:40px;font-size:1.2em;overflow:hidden}.calendar-header>div{float:left;width:50%;text-align:center;overflow:hidden}.calendar-header a:last-of-type{float:right;vertical-align:bottom}.calendar-title,.switch-btn{display:inline-block;border-radius:4px;line-height:30px}.switch-btn{width:30px;margin:5px;color:#39b5b8;font-family:SimSun}.calendar-title{padding:0 6%;color:#333}.calendar-header a.active,.calendar-title:active,.switch-btn:active{background-color:#39b5b8;color:#fff}.calendar-week{overflow:hidden}.calendar-week span{float:left;width:14.28%;font-size:1.6em;line-height:34px;text-align:center}.inline-calendar{width:100%;background:#fff;border-radius:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.inline-calendar td.is-today,.inline-calendar td.is-today.is-disabled{color:#04be02}.calendar-enter,.calendar-leave{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}.calendar:before{top:-10px;border-bottom-color:#dedede}.calendar:after,.calendar:before{position:absolute;left:30px;content:"";border:5px solid transparent}.calendar:after{top:-9px;border-bottom-color:#fff}.calendar-tools{height:32px;font-size:20px;line-height:32px;color:#04be02}.calendar-tools .float.left{float:left}.calendar-tools .float.right{float:right}.calendar-tools input{font-size:20px;line-height:32px;color:#04be02;width:70px;text-align:center;border:none;background-color:transparent}.calendar-tools>i{margin:0 16px;line-height:32px;cursor:pointer;color:#707070}.calendar-tools>i:hover{color:#5e7a88}.inline-calendar table{clear:both;width:100%;border-collapse:collapse;color:#444}.inline-calendar td{padding:5px 0;text-align:center;vertical-align:middle;font-size:16px;position:relative}.inline-calendar td.is-disabled,.inline-calendar td.week{pointer-events:none!important;cursor:default!important}.inline-calendar td.is-disabled{color:silver}.inline-calendar td>span{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;text-align:center}.vux-calendar-range.inline-calendar td.current{background-color:#04be02}.vux-calendar-range table{margin-bottom:10px}.inline-calendar td.current>span{background-color:#04be02;color:#fff}.inline-calendar .timer{margin:10px 0;text-align:center}.inline-calendar .timer input{border-radius:2px;padding:5px;font-size:14px;line-height:18px;color:#5e7a88;width:50px;text-align:center;border:1px solid #efefef}.inline-calendar .timer input:focus{border:1px solid #5e7a88}.calendar-button{text-align:center}.calendar-button button{border:none;cursor:pointer;display:inline-block;min-height:1em;min-width:8em;vertical-align:baseline;background:#5e7a88;color:#fff;margin:0 .25em 0 0;padding:.8em 2.5em;font-size:1em;line-height:1em;text-align:center;border-radius:.3em}.calendar-button button.cancel{background:#efefef;color:#666}.vux-popup{border-top:2px solid #04be02}.vux-popup-dialog{position:fixed;left:0;bottom:0;width:100%;background:#eee;z-index:101;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s}.vux-popup-mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;tap-highlight-color:transparent;z-index:-1}.vux-popup-mask.vux-popup-show{opacity:1;z-index:100;-webkit-transition:opacity .3s;transition:opacity .3s}.vux-popup-enter,.vux-popup-leave{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.vux-tap-active{tap-highlight-color:transparent}.vux-tap-active:active{background-color:#ececec}.weui_cell{position:relative}.weui_cell:before{content:" ";position:absolute;left:0;top:0;width:100%;height:1px;border-top:1px solid #d9d9d9;color:#d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5);left:15px}.weui_cell:first-child:before{display:none}.weui_cells{margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px;overflow:hidden;position:relative}.weui_cells:before{top:0;border-top:1px solid #d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0}.weui_cells:after,.weui_cells:before{content:" ";position:absolute;left:0;width:100%;height:1px;color:#d9d9d9;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui_cells:after{bottom:0;border-bottom:1px solid #d9d9d9;-webkit-transform-origin:0 100%;transform-origin:0 100%}.weui_cells_title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#888;font-size:14px}.weui_cells_title+.weui_cells{margin-top:0}.weui_cells_tips{margin-top:.3em;color:#888;padding-left:15px;padding-right:15px;font-size:14px}.weui_cell{padding:10px 15px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.weui_cell_ft{text-align:right;color:#888}.weui_cell_primary{-webkit-box-flex:1;-ms-flex:1;flex:1}.weui_cell_bd>p{color:#000}.weui_cell_ft.with_arrow:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;position:relative;top:-1px;margin-left:.3em}.vux-label-desc{font-size:14px;color:#666}

/* common.css */
html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    font-family: -apple-system-font, "Helvetica Neue", "Microsoft Yahei", sans-serif;   
    font-size: 14px;
    background: #f2f2f2;
    color: #333;
}
html, body {
    height: 100%;
}
input, textarea, select, button {
    font-size: 16px;
    font-family: -apple-system-font, "Helvetica Neue", "Microsoft Yahei", sans-serif;
    color: #333;
}
input:focus, textarea:focus {
    outline: none;
}
textarea {
    resize: none;
}
::-webkit-input-placeholder {
    color: #ccc;
}
ol, ul {
    list-style: none;
}
a {
    color: #333;
}
em {
    font-style: normal;
}
.page {
    overflow: hidden;
}
.page.show-navbar {
    padding-top: 40px;
}
.page.show-tabbar {
    padding-bottom: 44px;
}
.red-dot {
    display: inline-block;
    min-width: 18px;    
    height: 18px;   
    line-height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
    background: #f40;
    font-size: 13px;
    color: #fff;
    border-radius: 9px;
}
.touch {
    background: #fff;
}
.touch:active {
    background: #fafafa !important;
}
.mod-btn-box {
    padding: 30px 20px;
}
.link-access {
    position: relative;
}
.link-access::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 12px;
    top: 50%;
    margin: -4px 2px 0 0;
}
.bg_sprite, .hierarchy::before, .btn_add::before {
    background-image: url(../../static/imgs/sprite.png);
    background-repeat: no-repeat;
    -webkit-background-size: 250px auto;
    background-size: 250px auto;
}
.bg-color {
    background: #fff !important;
}

/* reset weui */
.weui-cells__title {
    color: #bbb;
    margin: 0;
    line-height: 20px;
    padding: 14px 12px 6px;
}
.weui-cells__title span {
    margin-right: 14px;
}
.weui-cells {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 12px;
}
.searchbar + .weui-cells {
    margin-top: -1px;
}
.weui-cells:before, .weui-cells:after, .weui-cell:before, .weui-actionsheet__cell:before {
    border-color: #e5e5e5;
}
.weui-cell {
    padding: 12px;
}
.weui-cell:before {
    left: 12px;
}
.weui-cells_form .weui-cell__ft {
    line-height: 0;
}
.weui-cells_checkbox .weui-cell:before {
    left: 47px;
}
.weui-cell_select {
    padding: 0;
}
.weui-cell_select-after {
    padding-left: 12px;
}
.weui-select {
    height: 48px;
    line-height: 48px;
}
.weui-cell_select .weui-cell__bd:after {
    right: 12px;
}
.weui-cell_access:active, .weui-actionsheet__cell:active, .weui-dialog__btn:active, .weui-cells_checkbox .weui-cell:active {
    background-color: #fafafa;
}
.weui-cell__bd {
    overflow: hidden;
}
.weui-cell__bd p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weui-cell__bd .title, .weui-label {
    color: #999;
    display: inline-block;
    width: auto;
    min-width: 64px;
    margin-right: 18px;
}
.weui-cell__bd .placeholder {
    color: #ccc;
}
.weui-input {
    height: 1.5em;
    line-height: 1.5;
}
.weui-btn_primary {
    background-color: #fa0;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
    background-color: #f90;
}
.weui-btn_disabled.weui-btn_primary {
    background-color: rgba(255, 170, 0, 0.4);
}
.weui-btn_disabled.weui-btn_primary.fixed {
    background: #fd9;
}
.weui-btn_primary:after, .weui-btn_warn:after {
    display: none;
}
.weui-btn.fixed {
    position: fixed;
    z-index: 99;
    width: 100%;
    border-radius: 0;
    left: 0;
    bottom: 0;
}
.weui-btn.fixed::after {
    display: none;
}
.weui-cells_radio .weui-check:checked + .weui-icon-checked:before, .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    color: #fa0;
}
.weui-tabbar {
    position: fixed;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: #fa0;
}
.weui-search-bar__cancel-btn {
    color: #333;
    font-size: 16px;
}
.weui-cell_switch {
    padding: 8px 12px;
}
.weui-switch:checked {
    background-color: #fa0;
    border-color: #fa0;
}
.weui-mask {
    background: rgba(0, 0, 0, 0.5);
}
.weui-dialog__hd {
    font-size: 18px;
    line-height: 24px;
    padding: 25px 18px 10px;
}
.weui-dialog__bd {
    font-size: 16px;
    line-height: 22px;
    min-height: 0;
    padding: 0 18px 15px;
}
.weui-dialog__bd:first-child {
    padding: 25px 18px 15px;
    color: #999;
}
.weui-cell__ft {
    color: #bbb;
    font-size: 14px;
    line-height: 24px;
}
.weui-dialog__ft:after, .weui-dialog__btn:after {
    border-color: #e5e5e5;
}
.weui-dialog__btn_default {
    color: #999;
}
.weui-dialog__btn_primary {
    color: #333;
}
.searchbar {
    position: relative;
}
.weui-search-bar {
    background-color: #f2f2f2;
}
.weui-search-bar::before, .weui-search-bar::after {
    border-color: #e5e5e5;
}
.weui-search-bar__label, .weui-icon-search {
    color: #ccc;
}
.weui-search-bar__label {
    line-height: 26px;
}
.searchbar-result {
    width: 100%;
    font-size: 14px;
    margin-top: 0;
    position: absolute !important;
    left: 0;
    top: 44px;
    z-index: 10;
}
.searchbar-result .keyword {
    color: #fa0;
}
.weui-cells_checkbox .weui-cell__hd {
    padding-right: 0;
}
[class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
    margin: 0 12px 0 0;
}
.weui-icon-search:before {
    margin: 0;
}

/* mod-tabs */
.mod-tabs {
    display: -webkit-box;
    display: flex;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(234, 233, 233, 0.5);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.mod-tabs li {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
}
.mod-tabs a {
    display: block;
    height: 40px;
    line-height: 40px;
    color: rgba(153, 153, 153, 0.9);
}
.mod-tabs a.current {
    color: rgb(102, 102, 102);
    box-shadow: 0 -2px 0 rgb(255, 187, 0) inset;
    font-weight: bold;
}

/* border */
[class*="com-border-"] {
    position: relative;
    overflow: hidden;
}
.com-border-top::before, .com-border-bottom::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgb(229, 229, 229);   
    left: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);  
    z-index: 9;
}
.com-border-top::before {
    top: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.com-border-bottom::after {
    bottom: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.com-border-outside::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    left: 0;
    top: 0;
}
[class*="com-border-"].ml::before, [class*="com-border-"].ml::after {
    left: 12px;
}

/* upload pic */
.upload-pic {
    background: #fff;
    padding: 15px 0 8px 12px;
    overflow: hidden;
    position: relative;
}
.upload-pic h2 {    
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    color: #999;
    margin-bottom: 20px;
}
.upload-pic .pic-list {
    overflow: visible;
}
.upload-pic .pic-list li {
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
}
.upload-pic .pic-list img {
    display: block;
    width: 60px;
    height: 60px;
}
.upload-pic .btn-delete {
    width: 18px;
    height: 18px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    right: -8px;
    top: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.upload-pic .btn-delete::before, .upload-pic .btn-delete::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
    left: 50%;
    top: 50%;
}
.upload-pic .btn-delete::before {
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
}
.upload-pic .btn-delete::after {
    width: 2px;
    height: 10px;
    margin: -5px 0 0 -1px;
}
.uploader {
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
    background: #fff;
}
.uploader input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    outline: none;
    opacity: 0;
}
.uploader div::before, .uploader div::after {
    content: "";
    position: absolute;
    background: rgb(204, 204, 204);
    left: 50%;
    top: 50%;
    border-radius: 2px;
}
.uploader div::before {
    width: 28px;
    height: 2px;
    margin: -1px 0 0 -14px;
}
.uploader div::after {
    width: 2px;
    height: 28px;
    margin: -14px 0 0 -1px;
}
.uploader::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(204, 204, 204);
    box-sizing: border-box;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* calendar */
.inline-calendar {
    overflow: hidden;
}
.inline-calendar table {
    color: #333;
    margin-bottom: 5px;
}
.calendar-header {
    font-size: 16px;
    line-height: normal;
    text-align: center;
}
.calendar-header > div {
    line-height: 22px;
    padding: 16px 22px 6px;
    float: none;
    width: auto;
    display: inline-block;
    position: relative;
    margin: 0 10px;
}
.calendar-title {
    line-height: inherit;
    padding: 0 20px;    
}
.calendar-title:active {
    background: transparent;
    color: #333;
}
.vux-prev-icon, .vux-next-icon {
    width: 22px;
    height: 22px;
    border: none;   
    margin: 0;
    -webkit-transform: none;
    transform: none;
    top: 16px;  
}
.vux-next-icon {
    right: 0;
}
.vux-prev-icon::after, .vux-next-icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #fa0;
    left: 50%;
    top: 50%;
    margin-top: -4px;
}
.vux-prev-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -3px;
}
.vux-next-icon::after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-left: -6px;
}
.inline-calendar th {
    font-size: 12px;
    color: #ccc;
    padding: 5px 0;
}
.inline-calendar td {
    font-size: 14px;
}
.inline-calendar td > span {
    width: 27px;
    height: 27px;
    line-height: 27px;  
}
.inline-calendar td.is-today, .inline-calendar td.is-today.is-disabled {
    color: #fa0;
}
.inline-calendar td.current > span, .inline-calendar td.selected > span {   
    background-color: rgba(255, 170, 0, 0.1);
    color: #333;
    position: relative;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after, .inline-calendar td::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.inline-calendar td.green::after, .inline-calendar td::after {
    width: 5px;
    height: 5px;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
.inline-calendar td.green::after {
    background: #89c16c;
}
.inline-calendar td.red::after {
    background: #f38355;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after { 
    width: 200%;
    height: 200%;
    border: 1px solid #fa0;
    box-sizing: border-box; 
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.inline-calendar td.current::after {
    display: none;
}

/* tabbar */
.tabbar {
    width: 100%;    
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
}
.tabbar ul {
    display: -webkit-box;
    display: flex;
}
.tabbar li {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
}
.tabbar a {
    display: block;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #aaa;
}
.tabbar li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 22px;
    background: #e5e5e5;
    -webkit-transform: scale3d(0.5, 1, 1);
    transform: scale3d(0.5, 1, 1);
    right: 0;
    top: 11px;
}
.tabbar li:last-child::after {
    display: none;
}
.tabbar .icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: rgb(221, 222, 226);
    margin-right: 8px;
}
.tabbar a span {
    vertical-align: middle;
}
.tabbar .current .icon {
    background: rgb(255, 170, 0);
}
.tabbar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);
}

/* toast */
.mod-toast {
    width: 100%;
    padding: 0 75px;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 9999;
}
.mod-toast p {
    display: inline-block;
    background: rgba(17, 17, 17, 0.7);
    padding: 32px 24px; 
    font-size: 16px;
    line-height: 22px;  
    color: #fff;
    border-radius: 5px;
}

/* button */
[class*="mod-btn-s-"] {
    display: inline-block;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 4px;
    position: relative;
}
[class*="mod-btn-s-"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 3px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mod-btn-s-1 {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.mod-btn-s-1::after, .mod-btn-s-3.selected::after {
    display: none;
}
.mod-btn-s-1:active {
    background: rgb(255, 153, 0);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-2 {
    background: rgb(248, 248, 248);
    color: rgb(53, 53, 53);
}
.mod-btn-s-2::after {
    border-color: rgba(5, 5, 5, 0.1);
}
.mod-btn-s-2:active {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(53, 53, 53, 0.6);
}
.mod-btn-s-3 {  
    color: rgb(255, 170, 0);
}
.mod-btn-s-3::after {
    border-color: rgb(255, 170, 0);
}
.mod-btn-s-3:active {   
    color: #fc6;
}
.mod-btn-s-3:active::after {
    color: #fc6;
}
.mod-btn-s-3.disabled {
    color: rgb(204, 204, 204);
}
.mod-btn-s-3.disabled::after {
    border-color: rgb(204, 204, 204);
}
.mod-btn-s-3.selected {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}

/* empty */
.mod-empty {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    margin-top: -30px;
}
.mod-empty .icon {
    display: block;
    width: 115px;
    height: 115px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
.mod-empty .icon_1 {    
    background-image: url(../../static/imgs/icons/icon_1.png);
}
.mod-empty .icon_2 {    
    background-image: url(../../static/imgs/icons/icon_2.png);
}
.mod-empty .icon_3 {    
    background-image: url(../../static/imgs/icons/icon_3.png);
}
.mod-empty .icon_4 {    
    background-image: url(../../static/imgs/icons/icon_4.png);
}
.mod-empty .tip {   
    color: #999;
    font-size: 16px;
    line-height: 22px;
}
.mod-empty .tip_2 {
    font-size: 12px;
    line-height: 16px;
    color: #ccc;
    margin-top: 10px;
}
.mod-empty .weui-btn {
    width: 150px;
    margin-top: 35px;
}

/* crumbs nav */
.mod-crumbs {
    height: 44px;
    line-height: 44px;
    padding-left: 16px;
    background: #fafafa;
    color: #bbb;
}
.mod-crumbs .arrow {
    margin: 0 8px;
    font-family: "Simsun";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #bbb;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
    text-indent: -9999px;
}
.mod-crumbs a {
    color: #f09835;
}
.mod-crumbs a, .mod-crumbs span {
    vertical-align: middle;
}


/* attendance.css */

.page.show-topbar {
    padding-top: 44px;
}
.topbar {
    width: 100%;
    height: 44px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    line-height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 10;
}
.topbar .date {
    float: left;
    font-size: 16px;
    color: #666;
}
.topbar .date .icon-calendar {
    float: left;
    width: 18px;
    height: 18px;
    background-position: 0 0;
    margin: 13px 12px 0 0;
}
.topbar .time {
    float: right;
    color: #999;
}
.process {
    padding-top: 16px;
    overflow: hidden;
}
.process .module {
    margin: 0 12px;
    padding-bottom: 16px;
    position: relative;
}
.process .wrap {
    position: relative;
    padding: 15px;
    background: #fff;
    border-radius: 2px;
    margin-left: 30px;
}
.process .top {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
}
.process .top .title {
    float: left;
}
.process .top .fr {
    float: right;
}
.process .top .button {
    float: right;
    width: 60px;
    background: #fa0;
    border-radius: 3px;
    color: #fff;
    text-align: center;
}
.process .top .button:active {
    background: #f90;
    color: rgba(255, 255, 255, 0.6);
}
.process .wrap::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    left: -6px;
    top: 24px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.process .state {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 20px;
    z-index: 1;
}
.process .state_1 {
    background-position: -42px -23px;
}
.process .state_2 {
    background-position: 0 -23px;
}
.process .state_3 {
    background-position: -21px -23px;
}
.process .line {    
    position: absolute;
    width: 2px;
    height: 100%;
    left: 7px;
    top: 27px;
    background-repeat: repeat-y;    
    -webkit-background-size: 2px auto;
    background-size: 2px auto;
}
.state_1 + .line {
    background-image: url(../../static/imgs/line_gray.png);
}
.state_2 + .line {
    background-image: url(../../static/imgs/line_green.png);
}
.state_3 + .line {
    background-image: url(../../static/imgs/line_red.png);
}
.process .module:last-child .line {
    display: none;
}
.tag {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 0 8px; 
    position: relative;
    font-size: 10px;
    border-radius: 2px;
}
.process .tag {
    float: left;
    margin: 7px 0 0 15px;
}
.tag::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border-radius: 4px;
    left: 0;
    top: 0;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box; 
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.tag_1 {
    background: rgba(135, 159, 218, 0.05);  
    color: rgb(153, 157, 166);  
}
.tag_1::after {
    border-color: rgb(153, 157, 166);
}
.tag_2 {
    background: rgba(127, 194, 92, 0.05);
    color: rgb(137, 193, 108);
}
.tag_2::after {
    border-color: rgb(137, 193, 108);
}
.tag_3 {
    background: rgba(243, 131, 84, 0.05);
    color: rgb(243, 131, 85);
}
.tag_3::after {
    border-color: rgb(243, 131, 85);
}
.process .top .time {
    float: right;
    font-size: 24px;
    color: rgb(255, 170, 0);
    margin-left: 12px;
}
.process .location {
    font-size: 12px;
    color: #999;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px 0 12px;
}
.process .location .icon-location {
    float: left;
    width: 12px;
    height: 12px;
    background-position: -34px -126px;
    margin: 2px 6px 0 0;
}
.pic-wrap {
    position: relative;
    margin-top: 10px;
    min-height: 16px;
}
.pic-list {
    overflow: hidden;
}
.pic-list li {
    float: left;
    margin-right: 8px;
    position: relative;
}
.pic-list img {
    display: block;
    width: 60px;
    height: 60px;
}
.pic-list .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 60px;
}
.pic-list .mask span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 2px;
    border-radius: 50%;
}
.pic-wrap .link {   
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 16px;
}
.process a {
    color: rgb(68, 153, 255);
}
.process .remark {
    margin-top: 20px;
    font-size: 12px;
    line-height: 16px;
    position: relative;
    color: rgb(153, 153, 153);
    position: relative;
    padding-top: 15px;
    word-wrap: break-word;
    word-break: break-all;
}
.remark em {
    color: rgb(102, 102, 102);
    margin-right: 8px;
    font-style: normal;
}
.process .remark::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgb(229, 229, 229);
    left: 0;
    top: 0;
    transform: scale3d(1, 0.5, 1);
    -webkit-transform: scale3d(1, 0.5, 1);
}
.process .remark.tip {
    color: rgb(243, 131, 85);
}
.remark + .remark.tip, .top + .remark {
    margin-top: 15px;
}
.location-detect {
    height: 48px;
    line-height: 48px;
    background: #fff;
    padding: 0 12px;
    font-size: 16px;
    overflow: hidden;
    position: relative;
}
.location-detect .title {
    float: left;
    color: #999;
    margin-right: 18px;
}
.location-detect .link {
    float: right;
    font-size: 14px;
    color: rgb(68, 153, 255);
    margin-left: 18px;
}
.location-detect .current { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.location-detect::after {
    content: "";
    width: 100%;
    height: 1px;
    background: rgb(229, 229, 229);
    position: absolute;
    left: 0;
    bottom: 0;
}
.location-detect::after {
    left: 12px;
}
.remark-input {
    width: 100%;
    height: 160px;
    background: #fff;
    border: none;
    resize: none;
    outline: none;
    padding: 12px;
    font-size: 16px;
    line-height: 22px;
    box-sizing: border-box;
}
.weui-gallery__img {
    bottom: 0;
}
.weui-actionsheet {
    background: transparent;
}
.weui-actionsheet__cell.tip {
    font-size: 12px;
    color: rgb(170, 170, 170);
    height: 56px;
    line-height: 56px;
    padding: 0;
}
.weui-actionsheet__cell.delete {
    color: rgb(243, 131, 85);
}

/* statistics */
.statistics .section {
    background: #fff;
    margin-bottom: 12px;
}
.statistics .chart {
    padding: 12px 12px 24px;
}
.statistics .chart h2 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
    font-weight: normal;
}
.statistics .chart img {
    display: block;
    width: 110px;
    height: 110px;
    margin: 0 auto;
}
.statistics .date {
    height: 44px;
    line-height: 44px;  
    font-size: 16px;    
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.statistics .date .btn_pre, .statistics .date .btn_nxt {
    display: inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    top: 11px;  
}
.statistics .date .btn_pre:after, .statistics .date .btn_nxt:after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #fa0;
    left: 50%;
    top: 50%;
    margin-top: -4px;
}
 .statistics .date .btn_pre::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -3px;
}
.statistics .date .btn_nxt::after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-left: -6px;
} 
.statistics .date span {
    margin: 0 20px;
}
.mod-count ul {
    overflow: hidden;
}
.mod-count li {
    float: left;
    width: 33.33%;
    position: relative;
}
.mod-count a {
    display: block;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 12px;
    color: #bbb;
}
.mod-count a:active {
    background: #fafafa;
}
.mod-count em {
    font-size: 18px;
    color: #666;
    margin: 0 4px 0 12px;
}
.mod-count li::before, .mod-count li::after {
    position: absolute;
    content: "";
    background: #e5e5e5;
    top: 0;
}
.mod-count li::before {
    width: 100%;
    height: 1px;
    left: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);
}
.mod-count li::after {
    width: 1px;
    height: 100%;
    right: 0;
    -webkit-transform: scale3d(0.5, 1, 1);
    transform: scale3d(0.5, 1, 1);
}
.mod-count li:nth-child(3n)::after {
    display: none;
}
.weui-cell__ft .count-data {
    font-size: 14px;
    color: #ccc;
    line-height: 24px;
}
.weui-cell__ft .count-data em {
    color: #999;
    margin-left: 10px;
}
/* .weui-cell__ft .tag {
    margin-right: 6px;
    top: -2px;
} */
.weui-cell__bd .tag {
    margin-left: 10px;
    top: -2px;
}
.section + .weui-cells__title {
    margin-top: -12px;
}

/* user */
.mod-user a {
    display: block;
    padding: 10px 12px;
    overflow: hidden;
    background: #fff;
}
.mod-user a:active {
    background: #fafafa;
}
.mod-user .avatar {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.mod-user .info {   
    margin: 0 20px 0 62px;
    font-size: 0;
}
.mod-user .name {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 4px;
    display: inline-block;
    max-width: 100%;
}
.mod-user .name .tag {
    float: right;
    margin: 3px 0 0 8px;
}
.mod-user .name .tag:last-child {   
    margin-left: 10px;
}
.mod-user .team {
    color: #999;
    line-height: 20px;
    font-size: 14px;
}
.mod-user .name, .mod-user .team {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin-right: 70px; */
    margin-right: 0;
}
.mod-user .phone {
    width: 18px;
    height: 18px;   
    background-position: 0 -44px;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -9px;
}
/* .mod-user .tag-wrap {
    position: absolute;
    right: 32px;
    top: 50%;
    margin-top: -8px;
    overflow: hidden;
}
.mod-user .tag-wrap .tag {
    float: left;
    margin-left: 8px;
} */
.mod-user .count {
    position: absolute;
    line-height: 20px;
    right: 12px;
    top: 50%;
    margin-top: -10px;
    color: #bbb;
}
.mod-user .count span {
    margin-left: 10px;
}
.mod-user .count .normal {
    color: rgb(190, 219, 174);
}
.mod-user .count .abnormal {
    color: rgb(241, 186, 164);
}
.user-list a::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #ccc;
    right: 12px;
    top: 50%;
    margin-top: -4px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.user-list .com-border-bottom::after {
    left: 74px;
}
.weui-dialog__bd.phone {
    font-size: 18px;
    line-height: 24px;
    color: #fa0;
    padding: 25px 18px;
}

/* download */
.download {
    padding: 100px 0 30px;
    text-align: center;
}
.download .icon-download {
    display: block;
    width: 80px;
    height: 87px;
    background: url(../../static/imgs/icons/icon_download.png) no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    margin: 0 auto 30px;
}
.download h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 6px;
}
.download .time {
    color: #999;
    line-height: 1;
    margin-bottom: 30px;
}
.download .weui-btn {
    display: inline-block;
    width: 128px;
    height: 40px;
    line-height: 40px;
    margin: 0 20px;
}

/* attendance set */
.attendance-set .tip_1 {
    line-height: 20px;
    color: #bbb;
    margin: 4px 12px 20px;
}
.attendance-set .weui-cell__bd .tip {
    color: #999;
    font-size: 14px;
    line-height: 20px;
    margin-top: 2px;
}
.edit-items {
    margin-top: 12px;
}
.edit-items .item {
    height: 48px;
    padding: 0 12px;
    background: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.edit-items .item h2 {
    font-weight: normal;
    font-size: 16px;
    -webkit-box-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edit-items .item .tip {
    font-size: 14px;
    color: #bbb;
    margin-left: 6px;
}
.edit-items .btn_edit {
    width: 16px;
    height: 16px;
    background-position: -63px -88px;
}
.edit-items .item:not(:last-child)::after {
    left: 12px;
}
.item-content {
    position: relative;
    margin-top: -1px;
    z-index: 1;
    margin-bottom: 12px;
}
.item-content li {
    padding: 10px 12px 10px 36px;
    background: #fff;
}
.item-content h3 {
    color: #666;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 4px;
}
.item-content p {
    color: #bbb;
    line-height: 20px;
    margin-top: 2px;
}
.item-content li:not(:last-child)::after {
    left: 36px;
}
.item-content .icon {
    position: absolute;
    width: 16px;
    height: 16px;   
    left: 10px;
    top: 14px;
}
.item-content .icon_1 {
    background-position: 0 -238px;
}
.item-content .icon_2 {
    background-position: -21px -238px;
}
.item-content .icon_3 {
    background-position: -42px -238px;
}
.location-list li {
    padding: 12px;
    background: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.location-list .location {
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 20px;
    overflow: hidden;
}
.location-list h2 {
    font-size: 16px;
    line-height: 22px;
    font-weight: normal;
    margin-bottom: 4px;
}
.location-list p {
    color: #999;
    line-height: 20px;
}
.location-list h2, .location-list p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.location-list .btn_delete {
    width: 18px;
    height: 18px;
    background-position: -46px 0;
}
.weui-cells__title .delete {
    float: right;
    color: #fa0;
}
.attendance-set .btn_add {
    display: block;
    height: 48px;
    line-height: 48px;
    color: #fa0;
    text-align: center;
}
.attendance-set .btn_add::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: -63px -23px;
    margin-right: 6px;
    vertical-align: middle;
}
.attendance-set .btn_add span {
    vertical-align: middle;
}
.attendance-set .week-set {
    margin-top: -1px;
}
.week-set .week-list {
    padding: 18px 6px 3px;
    overflow: hidden;
}
.week-set .week-list::before {
    left: 12px;
}
.week-set .week-list li {
    float: left;
    width: 20%;
    padding: 0 6px 15px;
    box-sizing: border-box;
}
.week-set .week-list a {
    width: 100%;
}

/* sign in tip */
.signin-tip {
    position: absolute;
    height: 26px;
    line-height: 26px;
    padding: 0 8px;
    background: #fff;
    font-size: 12px;
    color: #666;
    border-radius: 4px;
    z-index: 999;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.07);
}
.signin-tip::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid rgba(150, 150, 150, 0.24);
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.signin-tip .arrow {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: rgba(150, 150, 150, 0.24);
    left: 50%;
    bottom: 0;
    margin: 0 0 -8px -8px;
    transform: rotate(-45deg) scale(0.5);
    -webkit-transform: rotate(-45deg) scale(0.5);
    z-index: 1;
}
.signin-tip.location {
    padding-left: 14px;
}
.signin-tip.location::before {  
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background: rgb(36, 140, 255);
    left: 0;
    top: 0;
    border-radius: 4px 0 0 4px;
    z-index: 1;
}

/* form remind */
.remind-time .icon_time {
    width: 16px;
    height: 16px;
    background-position: -21px -238px;
    margin-right: 10px;
}
.remind-time .btn_delete {
    width: 18px;
    height: 18px;
    background-position: -46px 0;
}

.avatar-box {
    float: left;
    position: relative;
}
.avatar-box .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
</style>



